<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/4/1
  Time: 12:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书馆图书借阅管理系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script src="lib/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body {
            background: url("lib/Images/bg-3.jpg") no-repeat;
            background-size: cover;
        }
    </style>
    <script type="text/javascript">

        //图片预览
        function getFullPath(obj){
            if (obj){
                //ie
                if (window.navigator.userAgent.indexOf("MSIE") >= 1){
                    obj.select();
                    return document.selection.createRange().text;
                }else if (window.navigator.userAgent.indexOf("Firefox") >= 1){
                    //firefox　
                    return window.URL.createObjectURL(obj.files.item(0));
                }else if(navigator.userAgent.indexOf("Chrome")>0){
                    //chrome
                    return window.URL.createObjectURL(obj.files.item(0));
                }
                return obj.value;
            }
        }
        $(function(){
            $("#pic").change(function(){
                var path = getFullPath($(this)[0]);
                $("#imgPic").prop("src",path);


            });
        });
    </script>
    </script>
</head>
<body>
<div class="layui-container-box" style="width: 500px;background-color: #cccccc; margin-left: 250px; margin-top: 0px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加图书信息</legend>
    </fieldset>
    <form action="book.let?type=add" enctype="multipart/form-data" class="layui-form" method="post" style="margin-left: 20px">
        <div class="layui-form-item">
            <label class="layui-form-label">书名:</label>
            <div class="layui-input-block">
                <input type="text" name="bname" lay-verify="bname" autocomplete="off" placeholder="请输入书名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图书类别:</label>
            <div class="layui-input-block">
                <select name="typeId" lay-verify="required" lay-search>

                    <c:forEach items="${bookTypes}" var="bt">
                        <option value="${bt.id}">${bt.tname}</option>
                    </c:forEach>

                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">作者:</label>
            <div class="layui-input-block">
                <input type="text" name="author" lay-verify="author" autocomplete="off" placeholder="请输入作者" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">价格:</label>
            <div class="layui-input-block">
                <input type="text" name="price" lay-verify="required|price" autocomplete="off" placeholder="请输入价格" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图片:</label>
            <div class="layui-input-block" style="position: relative;">
                <input type="file" name="pic" lay-verify="pic"id="pic" name="pic" class="layui-btn" style="position: absolute; margin-left: 35px;">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出版社:</label>
            <div class="layui-input-block">
                <input type="text" name="publish" lay-verify="required" autocomplete="off" placeholder="请输入出版社" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存量:</label>
            <div class="layui-input-block">
                <input type="text" name="stock" lay-verify="required|stock" autocomplete="off" placeholder="请输入库存量" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">存放地址:</label>
            <div class="layui-input-block">
                <input type="text" name="address" lay-verify="required|address" autocomplete="off" placeholder="请输入存放地址" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简介:</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea" style="width: 300px; height: 100px;"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block" style="position: relative;">
                <button class="layui-btn" lay-submit="" lay-filter="demo1" style="width: 80px;position:absolute; left: -150px;bottom: -5px">立即提交</button>
                <button type="reset" class="layui-btn" style="width: 80px;position: absolute; bottom: -5px;right: 120px">重置</button>
            </div>
        </div>
    </form>
</div>
<div class="layui-container-box" style=" background-color: #cccccc; width: 300px; height: 400px; position: absolute; margin-left: 760px; margin-top: -620px;">
    <legend>图片预览</legend>
    <fieldset class="layui-elem-field layui-field-title">

        <img id="imgPic" src="#" width="300px" height="400px"/>
    </fieldset>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use('form',function () {
        var form = layui.form;
        //自定义验证规则
        form.verify({
            bname:function (value) {
                if (value.length < 1){
                    return '图书名称不能为空';
                }
            },
            bname:[/[\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20}/,"书名只能是中文或者英文,且不能超过20个字符"],
            author:[/[\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20}/,"作者姓名只能是中文或者英文,且不能超过20个字符"],
            publish:[/[\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20}/,"出版社只能是中文或者英文,且不能超过20个字符"],
            stock: [/^[0-9]*$/, "请输入正确的页数"],
            price: [/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, "请输入正确的价格"]
        })
    })
</script>
